<template>
    <div style="width: 100%;height: 100%">
        <!-- 顶部内容部分 -->
        <div class="context">
            <div class="home-page" @click.stop="selectTag({id:-100})">
                <div
                        v-for="tag in allTags"
                        :key="tag.id"
                        :ref="tag.id + 'icon'"
                        @dblclick="openTag(tag)"
                        @click.stop="selectTag(tag)"
                        class="home-icon"
                >
                    <el-image :src="tag.icon" class="home-icon-img"></el-image>
                    <span class="home-icon-title">{{tag.label}}</span>
                </div>
            </div>
            <div class="top-buttons" v-show="currentTag.id !== '0' ">
                <el-image :src="currentTag.icon" class="top-buttons-icon"></el-image>
                <span class="top-buttons-title">{{subString(currentTag.label,31)}}</span>
                <el-button @click.stop="closeWindow()" title="关闭" class="el-icon-close top-buttons-button" style="color: #666" size="mini"></el-button>
                <el-button @click.stop="minWindow()" title="最小化" class="el-icon-minus top-buttons-button" style="color: #666" size="mini"></el-button>
            </div>
            <iframe
                    class="page"
                    v-for="tag in tags"
                    :ref="tag.id + 'page'"
                    :key="tag.id"
                    :src="tag.src"
                    v-show="tag.show"
                    frameborder="0"
            ></iframe>
        </div>
        <!-- 底部任务栏 -->
        <div class="taskbar">
            <el-button @click.stop="menu.show = !menu.show" title="菜单" class="el-icon-s-operation menu-button" size="mini"></el-button>
            <el-button @click.stop="tagShow(tag)" class="tag" size="mini"
                       v-for="tag in tags" :key="tag.id"  :ref="tag.id + 'bar'">
                <el-image :src="tag.icon" class="tag-icon"></el-image>
                <span class="tag-title" >{{subString(tag.label,10)}}</span>
            </el-button>
            <el-button @click.stop="homeShow()" title="主页" class="el-icon-s-home menu-button home-button" size="mini"></el-button>
        </div>

        <!-- 左下角菜单 -->
        <div class="menu-drawer">
            <el-drawer
                    :modal="false"
                    :visible.sync="menu.show"
                    direction="btt"
                    size="600px"
                    :withHeader="false"
                    :show-close="false"
            >
                <div class="menu-left-icons">
                    <el-button title="站内统计" class="el-icon-s-data menu-left-icon" size="mini"></el-button>
                    <el-button title="用户" class="el-icon-user menu-left-icon" size="mini"></el-button>
                    <el-button title="退出" class="el-icon-switch-button menu-left-icon" size="mini"></el-button>
                </div>
                <div class="menu-left-lists"></div>
                <div class="menu-right-cards"></div>
            </el-drawer>
        </div>

    </div>

</template>

<script>
    export default {
        name: "HomePage",
        data() {
            return {
                zIndexValue: 1,
                homePage: {
                    id: '0',
                    name: "home",
                    label: "主页",
                    src: "",
                    icon:"",
                    description:"",
                    zIndex: -1,
                    show: true,
                },
                // 当前标签页
                currentTag: {},
                // 已打开的标签页
                tags: [],
                // 所有标签页信息
                allTags: [],
                // 左下角菜单
                menu:{
                    show: false
                }
            };
        },
        mounted() {
            // 页面初次渲染时，打开主页
          this.currentTag = this.homePage;
          this.initBackGround();
          // 初始化所有标签页信息
            this.initAllTags();
        },
        methods: {
            // 背景图片
            initBackGround(){
                this.$jsonp("https://d.pcs.baidu.com/file/035377d3ev1492c835a388a1b93156ac?fid=2469092999-250528-251963954936089&rt=pr&sign=FDtAERV-DCb740ccc5511e5e8fedcff06b081203-o72Bhz4QeX%2FHtxQsA9novikFgtQ%3D&expires=8h&chkbd=0&chkv=3&dp-logid=1370208511477538301&dp-callid=0&dstime=1683039583&r=815835971&origin_appid=28386056&file_type=0&access_token=121.ededd45681872f838d7ae24c2e7253d5.YQg8lS5vGI2IDcn3N2tTLgvZu08sS54ikzKrVmn.aPsIrA",{}).then(res =>{
                    console.log(res)
                });
            },
            // 初始化所有标签页信息
            initAllTags(){
                const allTags = [];
                allTags.push({
                    id: '00001',
                    name: "3DPrint",
                    label: "3D打印",
                    src: "",
                    icon:"../HomeStatic/3Ddayin.jpg",
                    description:"",
                    zIndex: -1,
                    show: false,
                })
                this.allTags = allTags;
            },
            // 打开标签
            openTag(tag){
                // 当页面已经打开，则放到最上层显示
                // 页面未打开，则打开并显示到最上层
                const tags = this.tags;
                let hasOpen = false;
                for(let i in tags){
                    const tagTmp = tags[i];
                    if(tag.id === tagTmp.id){
                        hasOpen = true;
                        break;
                    }
                }
                if(!hasOpen){
                    tags.push(tag);
                    this.tags = tags;
                }
                // 显示到最上层
                // 上面添加页面信息后，会重新渲染页面，立即将最新页面显示到最上层时，会找不到dom元素
                // 使用nextTick等待渲染完成后再修改样式，避免以上问题
                this.$nextTick(function () {
                    for (let i in tags) {
                        const t = tags[i];
                        if (t.id === tag.id) {
                            this.currentTag = t;
                            t.zIndex = ++this.zIndexValue;
                            t.show = true;
                            this.$refs[t.id + 'page'][0].style.zIndex = t.zIndex;
                            this.$refs[t.id + 'bar'][0].$el.style.backgroundColor = "rgba(255,255,255,0.3)";
                        } else {
                            this.$refs[t.id + 'bar'][0].$el.style.backgroundColor = "rgba(255,255,255,0)";
                        }
                    }
                })
            },
            // 单击选中标签
            selectTag(tag){
                const id = tag.id;
                const allTags = this.allTags;
                for(let i in allTags){
                    const tagTmp = allTags[i];
                    if(tagTmp.id === id){
                        this.$refs[tagTmp.id + 'icon'][0].style.backgroundColor = "rgba(50, 50, 50, 0.3)";
                    }else{
                        this.$refs[tagTmp.id + 'icon'][0].style.backgroundColor = "rgba(50, 50, 50, 0)";
                    }
                }
            },
            // 右上角关闭按钮
            closeWindow(){
                const tags = this.tags;
                // 默认页面为主页
                let currentTag = this.homePage;
                // 移除当前页，并获取zIndex最大的页面作为下一显示页面
                for(let i = tags.length - 1; i >= 0; i--){
                    const tag = tags[i];
                    if(tag.id === this.currentTag.id){
                        tags.splice(i,1);
                    }else{
                        if(tag.show && tag.zIndex >= currentTag.zIndex){
                            currentTag = tag;
                        }
                    }
                }
                // 当下一显示页面不为主页时，修改任务栏标签样式为选中状态
                if(currentTag.id !== '0'){
                    this.$refs[currentTag.id + 'bar'][0].$el.style.backgroundColor = "rgba(255,255,255,0.3)";
                }
                this.currentTag = currentTag;
            },
            // 右上角最小化按钮
            minWindow(){
                const tags = this.tags;
                // 默认页面为主页
                let currentTag = this.homePage;
                // 当前页隐藏； 修改任务栏标签样式为  未选中
                for(let i = tags.length - 1; i >= 0; i--){
                    const tag = tags[i];
                    if(tag.id === this.currentTag.id){
                        tag.zIndex = 0;
                        tag.show = false;
                        this.$refs[tag.id + 'page'][0].style.zIndex = 0;
                        this.$refs[tag.id + 'bar'][0].$el.style.backgroundColor = "rgba(255,255,255,0)";
                    }else{
                        if(tag.show && tag.zIndex >= currentTag.zIndex){
                            currentTag = tag;
                        }
                    }
                }
                // 当下一显示页面不为主页时，修改任务栏标签样式为 选中
                if(currentTag.id !== '0'){
                    this.$refs[currentTag.id + 'bar'][0].$el.style.backgroundColor = "rgba(255,255,255,0.3)";
                }
                this.currentTag = currentTag;
            },
            // 点击任务栏标签页
            tagShow(tag) {
                // 当前页的状态为显示时，点击相当于将其最小化。
                // 当前页的状态为不显示时，将其置于最上层显示
                if(tag.show && this.currentTag.id === tag.id){
                    this.minWindow();
                }else{
                    const tags = this.tags;
                    for (let i in tags) {
                        const t = tags[i];
                        if (t.id === tag.id) {
                            this.currentTag = t;
                            t.zIndex = ++this.zIndexValue;
                            t.show = true;
                            this.$refs[t.id + 'page'][0].style.zIndex = t.zIndex;
                            this.$refs[t.id + 'bar'][0].$el.style.backgroundColor = "rgba(255,255,255,0.3)";
                        } else {
                            this.$refs[t.id + 'bar'][0].$el.style.backgroundColor = "rgba(255,255,255,0)";
                        }
                    }
                    this.tags = tags;
                }
            },
            // 点击显示主页按钮
            homeShow(){
                // 修改所有任务栏标签样式为 未选中，并隐藏全部页面
                const tags = this.tags;
                for (let i in tags) {
                    const tag = tags[i];
                    tag.show = false;
                    this.$refs[tag.id + 'bar'][0].$el.style.backgroundColor = "rgba(255,255,255,0)";
                }
                this.tags = tags;
                // 当前页设置为首页
                this.currentTag = this.homePage;
            },
            // 字符串省略化处理
            subString(str, maxLength){
                if(str != null && maxLength > 0 && str.length >= maxLength){
                    return str.substring(0,maxLength - 3) + "...";
                }else{
                    return str;
                }
            }
        }
    }
</script>

<style scoped>
    /* 内容区样式 */
    .context{
        width: 100%;
        height: 100%;
        border: 0;
    }
    .top-buttons{
        width: 100%;
        min-width: 800px;
        height: 28px;
        position: absolute;
        top: 0;
        z-index: 9999;
        background-color: rgba(255, 255, 255, 0);
    }
    .top-buttons-icon{
        display: inline-block;
        float: left;
        width: 18px;
        height: 18px;
        margin: 5px 10px 0 5px;
    }
    .top-buttons-title{
        display: inline-block;
        float: left;
        height: 18px;
        margin: 3px 0 0 0;
        width: 600px;
        color: #666;
    }
    .top-buttons-button {
        margin: 0;
        float: right;
        color: #fff;
        border: 0;
        font-size: 18px;
        background-color: rgba(50, 50, 50, 0);
        padding: 5px 20px;
    }
    .home-page{
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        justify-content: flex-start;
        align-content:flex-start;
        background: url("../assets/imgs/bg.jpg") repeat;
    }
    .home-icon{
        display: inline-block;
        width: 100px;
        height: 100px;
        background-color: rgba(50, 50, 50, 0);
    }
    .home-icon-img{
        display: block;
        width: 60px;
        height: 60px;
        margin: 10px auto;
    }
    .home-icon-title{
        display: block;
        width: 80px;
        margin: 0 auto;
        color: #ccc;
        text-align: center;
        font-size: 12px;
    }
    .page{
        width: 100%;
        min-width: 800px;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        background-color: #ccc;
    }


    /* 任务栏样式 */
    .taskbar {
        width: 100%;
        min-width: 800px;
        height: 28px;
        position: absolute;
        bottom: -2px;
        background-color: rgba(50, 50, 50, 0.9);
        z-index: 9999;
    }
    .menu-button {
        float: left;
        color: #fff;
        font-size: 18px;
        background-color: rgba(50, 50, 50, 0);
        padding: 5px;
    }
    .home-button {
        float: right;
        color: #fff;
        font-size: 18px;
        background-color: rgba(50, 50, 50, 0);
        padding: 5px;
    }
    .taskbar /deep/ .el-button--mini, .el-button--mini.is-round {
        border: 0;
        margin: 0 5px;
        border-radius: 0;
        height: 28px;
    }
    .tag {
        padding: 0 15px;
        background-color: rgba(255, 255, 255, 0);
        color: #fff;
        width: 150px;
        text-align: left;
    }
    .tag-icon{
        display: inline-block;
        float: left;
        width: 18px;
        height: 18px;
        margin: 2px;
    }
    .tag-title{
        display: inline-block;
        float: left;
        height: 18px;
        margin: 5px 0 0 5px;
        width: 90px;
    }

    /* 菜单抽屉 */
    .menu-drawer /deep/ .el-drawer.btt{
        width: 900px;
        bottom: 28px;
        background-color: rgba(20, 20, 20, 0.95);
    }
    .menu-left-icons{
        width: 40px;
        height: 600px;
        padding-top: 450px;
    }
    .menu-left-icons /deep/ .el-button{
        padding: 0;
    }
    .menu-left-icon{
        display: inline-block;
        width: 20px;
        height: 20px;
        color: #fff;
        margin: 10px 13px;
        font-size: 14px;
        font-weight: normal;
        background-color: rgba(0,0,0,0);
        border: solid 1px #cccccc;
        border-radius: 10px;
    }
    .menu-left-lists{

    }
    .menu-right-cards{

    }
</style>
